<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- Header -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">
          <span class="text-gradient">图片工具</span>
        </h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          提供各种图片处理工具，包括压缩、格式转换、编辑等功能
        </p>
      </div>

      <!-- Tool Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div v-for="tool in imageTools" :key="tool.id" class="tool-card">
          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg flex items-center justify-center flex-shrink-0">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="tool.icon"></path>
              </svg>
            </div>
            <div class="flex-1">
              <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ tool.name }}</h3>
              <p class="text-gray-600 text-sm mb-3">{{ tool.description }}</p>
              <NuxtLink :to="tool.path" class="primary-button inline-block">
                开始使用
              </NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const imageTools = [
  {
    id: 1,
    name: '图片压缩',
    description: '压缩图片文件大小，保持最佳质量',
    path: '/image-tools/compress',
    icon: 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z'
  },
  {
    id: 2,
    name: '图片格式转换',
    description: '在不同图片格式间转换（JPG、PNG、WEBP等）',
    path: '/image-tools/convert',
    icon: 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z'
  },
  {
    id: 3,
    name: '图片裁剪',
    description: '在线裁剪图片，支持自定义尺寸和比例',
    path: '/image-tools/crop',
    icon: 'M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z'
  },
  {
    id: 4,
    name: '图片缩放',
    description: '调整图片尺寸，保持宽高比例',
    path: '/image-tools/resize',
    icon: 'M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4'
  },
  {
    id: 5,
    name: '图片旋转',
    description: '旋转和翻转图片',
    path: '/image-tools/rotate',
    icon: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'
  },
  {
    id: 6,
    name: '图片加水印',
    description: '为图片添加文字或图片水印',
    path: '/image-tools/watermark',
    icon: 'M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z'
  },
  {
    id: 7,
    name: '图片取色器',
    description: '从图片中提取颜色代码',
    path: '/image-tools/color-picker',
    icon: 'M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z'
  },
  {
    id: 8,
    name: '图片合并',
    description: '将多张图片合并为一张',
    path: '/image-tools/merge',
    icon: 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z'
  },
  {
    id: 9,
    name: 'GIF制作',
    description: '将多张图片制作成GIF动画',
    path: '/image-tools/gif-maker',
    icon: 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z'
  },
  {
    id: 10,
    name: '多格切图',
    description: '九宫格/多格切图',
    path: '/image-tools/split',
    icon: 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z'
  },
  {
    id: 11,
    name: '在线抠图',
    description: '在线抠图，移除图片背景',
    path: '/image-tools/remove-bg',
    icon: 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z'
  }
  ,
  {
    id: 12,
    name: '网页图片提取器',
    description: '从指定网页抓取并展示可下载的图片',
    path: '/image-tools/webpage-extractor',
    icon: 'M12 2a10 10 0 100 20 10 10 0 000-20z'
  }
]

// SEO
useHead({
  title: '图片工具 - 八八在线工具',
  meta: [
    { name: 'description', content: '在线图片处理工具，提供图片压缩、格式转换、裁剪、缩放、旋转、加水印、取色器、合并、GIF制作等多种实用功能' },
    { property: 'og:title', content: '图片工具 - 八八在线工具' },
    { property: 'og:description', content: '在线图片处理工具，提供图片压缩、格式转换、裁剪、缩放、旋转、加水印等多种实用功能' }
  ]
})
</script>